import React from 'react'

class EventDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'ionluo',
            list: [
                {id: 'id-1', title: '标题1'},
                {id: 'id-2', title: '标题2'},
                {id: 'id-3', title: '标题3'},
            ]
         }

         // 修改方法的 this 指向
         this.clickHandler1 = this.clickHandler1.bind(this)
    }
    render() {
        // this - 使用bind
        return <div>
            <h3>事件</h3>
            <p onClick={this.clickHandler1}>clickHandler1: {this.state.name}</p>
            <p onClick={this.clickHandler2}>clickHandler2: {this.state.name}</p>
            <a href='https://www.baidu.com' onClick={this.clickHandler3}>点我跳转百度</a>
            <ul>{this.state.list.map((item, index) => {
                // 必填，不能是index或者random
                return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
                    index: {index}; title: {item.title}
                </li>
            })}</ul>
        </div>
    }
    // class方法，this默认是undefined，因此需要实例化时为其绑定this
    clickHandler1() {
        this.setState({name: '张三'})
    }
    // 静态方法，this指向当前实例
    clickHandler2 = () => {
        this.setState({name: '李四'})
    }
    clickHandler3 = (event) => {
        console.log('event', event) // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent （组合事件）
        console.log('nativeEvent', event.nativeEvent) // 原生event，其 __proto__.constructor 是 MouseEvent
        // 注意，所有的DOM事件都被挂载到document上，event.nativeEvent.currentTartget === 'document'
        event.preventDefault()
        event.stopPropagation()
        alert('我阻止跳转了！')
    }
    // 利用bind传递参数，clickHandler1其实也可以在点击的时候bind 
    clickHandler4(id, title, event) {
        console.log(id, title, event) // 最后追加一个参数即是 event
        alert(title)
    }
}

export default EventDemo